//百科里的详情页
<template>
   <div class="box">
    <div class="left" @click="btn">
      &lt;返回
    </div>
    <p class="p1">{{ data.chineseName }}</p><br/>
    <div class="box2">
      <div class="img">
        <img class="img-li" :src="data.img2" />
      </div>
      <div class="box2-right">
        <h2 style="margin-left: 30px;color: rgb(99, 102, 102);">简介</h2>
        <hr style="width: 640px;"/>
        <h3 style="margin-left: 30px;margin-top: -15px;  display: inline-block;">植物名称:<p style="display: inline-block;font-size:18px;font-weight:normal">{{ data.plantName }}</p></h3>
        <h3 style="margin-left: 30px;margin-top: -40px;">病害中文名:<p style="display: inline-block;font-size:18px;font-weight:normal">{{ data.chineseName }}</p></h3>
        <h3 style="margin-left: 30px;margin-top: -40px;">病害中文名:<p style="display: inline-block;font-size:18px;font-weight:normal">{{ data.englishName }}</p></h3>
        <h3 style="margin-left: 30px;margin-top: -40px;">异名:<p style="display: inline-block;font-size:18px;font-weight:normal">{{ data.synonym }}</p></h3>
      </div>
    </div>
    <br /><br />
    <div class="right">
      <div class="img">
        <img class="img-li" :src="data.img1" />
      </div>
      <div class="text">
        <el-collapse accordion>
          <el-collapse-item>
            <template slot="title">
              <h1 class="text2">症状</h1>
            </template>
            <div class="text">
              {{ data.symptom }}
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              <h1 class="text2">侵染途径</h1>
            </template>
            <div class="text">
              {{ data.infectionCycle }}
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              <h1 class="text2">发病规律</h1>
            </template>
            <div class="text">
              {{ data.occurrenceFactor }}
            </div>
          </el-collapse-item>
          <el-collapse-item>
            <template slot="title">
              <h1 class="text2">预防方法</h1>
            </template>
            <div class="text">
              {{ data.preventionMethod }}
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>
<script>
import { plantDetil } from "@/api/index";
export default {
  data() {
    return {
      data: {},
    };
  },
  mounted() {
    this.init();
  },
  computed: {
    context() {
      //  计算属性
      return this.$route.query.context;
    },
  },
  methods: {
    init() {
      plantDetil(this.context).then((res) => {
        let data = JSON.parse(JSON.stringify(res.data)).data;
        // console.log("plantDetil================" + JSON.stringify(data));
        this.data = data;
      });
    },
    btn() {
      //返回百科页
      // console.log(this.data);
      // console.log(this.data.plantName);
      this.$router.push({
        path: "/baike/rightDetail",
        query: {
          plant: this.data.plantName,//植物名称
          current: this.$route.query.current,//当前页面
          size: this.$route.query.size,//页面大小
        },
      });
    },
  },
};
</script>
<style scoped>
.box {
  width: 1100px;
  /* height: 680px; */
  background-color: rgb(255, 255, 255);
  margin: auto;
}
.box2 {
  width: 900px;
  height: 200px;
  background-color: rgb(255, 255, 255);
  margin-left: 100px;
  margin-bottom: 20px;
  margin-top: -18px;
}
.left {
  width: 100px;
  height: 60px;
  background-color: rgb(255, 255, 255);
  float: left;
  font-size: 23px;
  margin-top: -1px;
}
.right {
  width: 900px;
  height: 617px;
  background-color: rgb(255, 255, 255);
  float: left;
  margin-left: 100px;
  margin-top: -12px;
}
.img {
  width: 197px;
  height: 197px;
  background-color: rgb(255, 255, 255);
  float: left;
}
.img-li {
  width: 197px;
  height: 197px;
}
.text {
  width: 670px;
  background-color: rgb(243, 243, 243);
  float: left;
  margin-left: 30px;
  font-size: 16px;

}
.p1{
  color: rgb(255, 255, 255);
  font-size: 30px;
  background-color: #54924b;
  width: 1000px;
}
.box2-right {
  width: 700px;
  height: 200px;
  background-color: rgb(255, 255, 255);
  margin-left: 200px;
}
h2 {
  margin-top: -10px;
  margin-left: 200px;
}
</style>
